<route>
    {
        meta: {
            layout: 'hrm',
            title:'部门管理'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-input-search  allow-clear v-model:value="deptName" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;"  />
            <a-button v-isAdmin type="primary" style="margin-bottom: 10px; width: 80px;" @click="handleAdd(null)">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>
        <a-table :columns="columns" :data-source="dataSource" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'status'">
                    <view v-if="record.status === 1">
                        <a-tag color="green">启用</a-tag>
                    </view>
                    <view v-else-if="record.status === 0">
                        <a-tag color="red">停用</a-tag>
                    </view>

                </template>

                <template v-if="column.dataIndex === 'action'">


                    <a-button v-isAdmin type="link" @click="handleAdd(record)">
                        <PlusOutlined />
                    </a-button>
                    <a-button v-isAdmin type="link" @click="handleEdit(record)">
                        <FormOutlined />
                    </a-button>
                    <AntdZh>
                        <a-popconfirm title="确定删除该条记录 ?" @confirm="handleDelete(record.id)">
                            <a-button v-isAdmin type="link" danger>
                                <DeleteOutlined />
                            </a-button>
                        </a-popconfirm>
                    </AntdZh>

                </template>
            </template>
        </a-table>

        <AntdConfirmModal :title="title" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="部门名称" name="deptName" :rules="[{ required: true, message: '请输入名称' }]">
                            <a-input v-model:value="form.deptName" style="width: 400px;" placeholder="请输入名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="负责人" name="leader">
                            <a-input v-model:value="form.leader" style="width: 400px;" placeholder="请输入编码" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="负责人邮箱" name="email">
                            <a-input v-model:value="form.email" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="联系电话" name="mobile">
                            <a-input v-model:value="form.mobile" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="状态" name="status">
                            <a-switch v-model:checked="form.status" :checkedValue="1" :unCheckedValue="0"
                                checked-children="启用" un-checked-children="禁用" @change="swiChange" />
                            <!-- <a-input-number v-model:value="form.status" style="width: 400px;" controls-position="right"
                                :min="0" /> -->
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="排序" name="deptSort">
                            <a-input-number v-model:value="form.deptSort" style="width: 400px;" controls-position="right"
                                :min="0" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { columns, formValue } from './index';
import { queryTree, queryOne, createOne, updateOne, deleteOne } from '@/module/system/api/dept';
import useDeptStore from '@/module/system/store/dept';
const deptStore = useDeptStore();
import useApp from '@/hooks';
const { $ } = useApp();
const dataSource = ref([]);
const form = ref(formValue);
const title = ref(null);
const modalRef = ref(null);
const deptName = ref(null)
// 监听数据变化
watch(() => deptName.value, (newVal, oldVal) => {
    const t = $.freeStore(deptStore.deptTree)
    console.log(t)
    if ($.isEmpty(newVal)) {
        dataSource.value = t
    }
    else {
        dataSource.value = $.treeFilter(t, newVal)
    }

})
// 新增操作
function handleAdd(e) {
    form.value = formValue
    // 如果为空-> 新公司
    if ($.isEmpty(e)) {
        title.value = '新增部门'
    } else {
        //新增子公司
        title.value = `新增【${e.deptName}】的子部门`
        form.value.parentId = e.id;
    }
    modalRef.value.openModal()
}

// 删除操作
function handleDelete(id) {
    deleteOne(id).then(r => {
        buildTree()
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
    })
}
// 编辑操作
function handleEdit(e) {
    title.value = `【${e.deptName}】信息修改`
    queryOne(e.id).then(res => {
        form.value = res
        modalRef.value.openModal()
    })
}
// 提交
function submitForm() {
    // 没有ID 就是新增
    if ($.isEmpty(form.value.id)) {
        createOne(form.value).then(r => {
            buildTree()
            modalRef.value.closeModal()
            $.showToast({
                title: '新建成功',
                icon: 'success'
            })
        })
    } else {
        updateOne(form.value).then(r => {
            buildTree()
            modalRef.value.closeModal()
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
        })
    }
}
// 更新部门树
function buildTree() {
    deptStore.freshTree().then(response => {
        dataSource.value = $.freeStore(response)
    })
}
buildTree()
</script>
<style scoped>
[data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}
</style>